<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">教师管理平台</h2>
        <el-button icon="el-icon-menu" class="toggle-btn" @click="toggleSidebar"></el-button>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#0b1b33"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isSidebarCollapse"
          router
      >
        <el-menu-item index="/kcgl">
          <el-icon><document /></el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="/answer">
          <el-icon><QuestionFilled /></el-icon>
          <span>答疑管理</span>
        </el-menu-item>
        <el-menu-item index="/teacherper">
          <el-icon><setting /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapse': isSidebarCollapse }">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>答疑管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 页面标题与操作 -->
      <div class="page-header">
        <h1 class="page-title">答疑管理</h1>
        <el-button type="primary" @click="handleCreateFAQ">
          <el-icon><plus /></el-icon>添加常见问题
        </el-button>
      </div>

      <!-- 搜索筛选区 -->
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="搜索">
            <el-input v-model="searchForm.keyword" placeholder="请输入问题内容/学生姓名搜索" clearable />
          </el-form-item>
          <el-form-item label="课程">
            <el-select v-model="searchForm.courseId" placeholder="请选择课程">
              <el-option
                  v-for="course in courseOptions"
                  :key="course.id"
                  :label="course.name"
                  :value="course.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option label="未回复" value="unanswered" />
              <el-option label="已回复" value="answered" />
              <el-option label="已解决" value="solved" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><search /></el-icon>搜索
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 答疑列表 -->
      <el-card class="question-list-card">
        <el-table
            :data="questionList"
            border
            stripe
            fit
            highlight-current-row
            empty-text="暂无提问数据"
        >
          <el-table-column prop="id" label="问题ID" width="80" />
          <el-table-column prop="studentName" label="提问学生" width="120">
            <template #default="scope">
              <div class="student-info">
                <img :src="scope.row.studentAvatar" class="student-avatar" alt="学生头像" />
                <span>{{scope.row.studentName}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="courseName" label="所属课程" width="160" />
          <el-table-column prop="title" label="问题标题" min-width="200" />
          <el-table-column prop="createTime" label="提问时间" width="160" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{getStatusText(scope.row.status)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template #default="scope">
              <el-button type="text" size="small" @click="handleViewQuestion(scope.row)">
                <el-icon><view /></el-icon>查看
              </el-button>
              <el-button type="text" size="small" @click="handleReplyQuestion(scope.row)"
                         v-if="scope.row.status === 'unanswered'">
                <el-icon><edit /></el-icon>回复
              </el-button>
              <el-button type="text" size="small" @click="handleMarkAsSolved(scope.row)"
                         v-if="scope.row.status === 'answered'">
                <el-icon><check /></el-icon>标记为解决
              </el-button>
              <el-button type="text" size="small" @click="handleDeleteQuestion(scope.row)">
                <el-icon><delete /></el-icon>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          />
        </div>
      </el-card>

      <!-- 常见问题 -->
      <el-card class="faq-card">
        <div class="card-header">
          <h3 class="card-title">常见问题</h3>
          <el-button type="text" size="small" @click="handleManageFAQs">
            <el-icon><setting /></el-icon>管理常见问题
          </el-button>
        </div>
        <el-accordion v-model="activeFaq" class="faq-accordion">
          <el-accordion-item v-for="faq in faqList" :key="faq.id">
            <template #header>
              <span>{{faq.question}}</span>
            </template>
            <div class="faq-answer">
              {{faq.answer}}
            </div>
          </el-accordion-item>
        </el-accordion>
      </el-card>
    </div>

    <!-- 问题详情对话框 -->
    <el-dialog :visible.sync="detailDialogVisible" title="问题详情" width="70%">
      <template #content>
        <div v-if="currentQuestion">
          <div class="question-detail-header">
            <div class="question-info">
              <h3 class="question-title">{{currentQuestion.title}}</h3>
              <div class="question-meta">
                <span class="meta-item"><el-icon><user /></el-icon>{{currentQuestion.studentName}}</span>
                <span class="meta-item"><el-icon><document /></el-icon>{{currentQuestion.courseName}}</span>
                <span class="meta-item"><el-icon><date /></el-icon>{{currentQuestion.createTime}}</span>
                <span class="meta-item"><el-icon><tag /></el-icon>
                  <el-tag :type="getStatusType(currentQuestion.status)">{{getStatusText(currentQuestion.status)}}</el-tag>
                </span>
              </div>
            </div>
          </div>

          <div class="question-content">
            <div class="question-body">
              <h4>问题描述</h4>
              <div class="content-text" v-html="currentQuestion.content"></div>
            </div>

            <div class="question-reply" v-if="currentQuestion.reply">
              <h4>回复内容</h4>
              <div class="reply-header">
                <span class="reply-author">教师回复</span>
                <span class="reply-time">{{currentQuestion.replyTime}}</span>
              </div>
              <div class="content-text" v-html="currentQuestion.reply"></div>
            </div>

            <div class="question-operations" v-if="currentQuestion.status !== 'solved'">
              <h4>操作</h4>
              <el-button type="primary" @click="handleReplyQuestion(currentQuestion)">
                <el-icon><edit /></el-icon>回复问题
              </el-button>
              <el-button v-if="currentQuestion.reply" type="success" @click="handleMarkAsSolved(currentQuestion)">
                <el-icon><check /></el-icon>标记为解决
              </el-button>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 回复问题对话框 -->
    <el-dialog :visible.sync="replyDialogVisible" title="回复问题">
      <template #content>
        <div v-if="currentQuestion">
          <div class="reply-header">
            <h3 class="reply-title">回复 {{currentQuestion.studentName}} 的问题</h3>
            <p class="question-preview">{{currentQuestion.title}}</p>
          </div>

          <el-form :model="replyForm" ref="replyFormRef" label-width="80px">
            <el-form-item label="回复内容" prop="content">
              <el-input
                  type="textarea"
                  v-model="replyForm.content"
                  :rows="10"
                  placeholder="请输入回复内容..."
                  @input="handleInput"
              />
            </el-form-item>
            <el-form-item label="是否设为常见问题">
              <el-switch v-model="replyForm.isFaq" active-text="是" inactive-text="否" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button @click="replyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveReply">保存回复</el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑常见问题对话框 -->
    <el-dialog :visible.sync="faqDialogVisible" title="常见问题">
      <template #content>
        <el-form :model="faqForm" ref="faqFormRef" label-width="80px">
          <el-form-item label="问题" prop="question">
            <el-input v-model="faqForm.question" placeholder="请输入问题..." />
          </el-form-item>
          <el-form-item label="答案" prop="answer">
            <el-input type="textarea" v-model="faqForm.answer" :rows="10" placeholder="请输入答案..." />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="faqDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveFAQ">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import {
  Document,
  User,
  QuestionFilled,
  Setting,
  Search,
  Refresh,
  Edit,
  Delete,
  Plus,
  View,
  Check,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 侧边栏相关状态
const isSidebarCollapse = ref(false)
const activeMenu = ref('questionManagement')
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value
}

// 答疑管理相关状态
const state = reactive({
  questionList: [], // 问题列表数据
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示数量
  total: 0, // 总记录数
  searchForm: {
    keyword: '', // 搜索关键词
    courseId: '', // 课程筛选
    status: '' // 状态筛选
  },
  courseOptions: [
    { id: 'all', name: '全部课程' },
    { id: '1', name: 'Vue3 实战教程' },
    { id: '2', name: 'React 高级应用' },
    { id: '3', name: 'Flutter 跨平台开发' },
    { id: '4', name: '大数据分析与应用' },
    { id: '5', name: '人工智能基础' }
  ],
  faqList: [], // 常见问题列表
  activeFaq: [], // 展开的常见问题
  // 对话框相关
  detailDialogVisible: false,
  currentQuestion: null,
  replyDialogVisible: false,
  replyForm: {
    content: '',
    isFaq: false
  },
  faqDialogVisible: false,
  faqForm: {
    id: null,
    question: '',
    answer: ''
  }
})

const {
  questionList,
  currentPage,
  pageSize,
  total,
  searchForm,
  courseOptions,
  faqList,
  activeFaq,
  detailDialogVisible,
  currentQuestion,
  replyDialogVisible,
  replyForm,
  faqDialogVisible,
  faqForm
} = state

// 模拟获取问题列表数据
const fetchQuestionList = () => {
  // 这里模拟接口请求，实际开发中替换为真实的 API 调用
  setTimeout(() => {
    // 模拟筛选逻辑
    let filteredQuestions = mockQuestions

    if (searchForm.keyword) {
      filteredQuestions = filteredQuestions.filter(question =>
          question.title.includes(searchForm.keyword) ||
          question.content.includes(searchForm.keyword) ||
          question.studentName.includes(searchForm.keyword)
      )
    }

    if (searchForm.courseId && searchForm.courseId !== 'all') {
      filteredQuestions = filteredQuestions.filter(question =>
          question.courseId === searchForm.courseId
      )
    }

    if (searchForm.status) {
      filteredQuestions = filteredQuestions.filter(question =>
          question.status === searchForm.status
      )
    }

    // 模拟分页
    const start = (currentPage - 1) * pageSize
    const end = start + pageSize
    questionList.splice(0, questionList.length)
    questionList.push(...filteredQuestions.slice(start, end))
    total.value = filteredQuestions.length
  }, 300)
}

// 模拟获取常见问题数据
const fetchFaqList = () => {
  // 这里模拟接口请求，实际开发中替换为真实的 API 调用
  setTimeout(() => {
    faqList.splice(0, faqList.length)
    faqList.push(...mockFaqs)
  }, 300)
}

onMounted(() => {
  fetchQuestionList()
  fetchFaqList()
})

// 搜索问题
const handleSearch = () => {
  currentPage.value = 1
  fetchQuestionList()
}

// 重置搜索条件
const resetSearch = () => {
  searchForm.keyword = ''
  searchForm.courseId = ''
  searchForm.status = ''
  currentPage.value = 1
  fetchQuestionList()
}

// 分页相关
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchQuestionList()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchQuestionList()
}

// 状态转换函数
const getStatusText = (status) => {
  const statusMap = {
    'unanswered': '未回复',
    'answered': '已回复',
    'solved': '已解决'
  }
  return statusMap[status] || status
}

const getStatusType = (status) => {
  const typeMap = {
    'unanswered': 'warning',
    'answered': 'primary',
    'solved': 'success'
  }
  return typeMap[status] || 'default'
}

// 处理查看问题详情
const handleViewQuestion = (question) => {
  // 复制问题数据
  currentQuestion.value = JSON.parse(JSON.stringify(question))
  detailDialogVisible.value = true
}

// 处理回复问题
const handleReplyQuestion = (question) => {
  // 复制问题数据
  currentQuestion.value = JSON.parse(JSON.stringify(question))

  // 重置回复表单
  replyForm.content = ''
  replyForm.isFaq = false

  replyDialogVisible.value = true
}

// 处理输入
const handleInput = () => {
  // 处理输入事件
}

// 处理保存回复
const handleSaveReply = () => {
  if (!replyForm.content.trim()) {
    ElMessage.error('请输入回复内容')
    return
  }

  // 模拟保存回复
  setTimeout(() => {
    // 更新问题状态
    currentQuestion.value.reply = replyForm.content
    currentQuestion.value.replyTime = new Date().toLocaleString()
    currentQuestion.value.status = 'answered'

    // 更新问题列表中的对应项
    const index = questionList.value.findIndex(q => q.id === currentQuestion.value.id)
    if (index !== -1) {
      questionList.value[index] = currentQuestion.value
    }

    // 如果选择设为常见问题
    if (replyForm.isFaq) {
      faqForm.question = currentQuestion.value.title
      faqForm.answer = replyForm.content
      faqDialogVisible.value = true
    } else {
      ElMessage.success('回复成功')
      replyDialogVisible.value = false
    }
  }, 300)
}

// 处理标记为解决
const handleMarkAsSolved = (question) => {
  ElMessageBox.confirm(
      `确定要将问题「${question.title}」标记为已解决吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 模拟标记为解决
    setTimeout(() => {
      // 更新问题状态
      question.status = 'solved'

      // 更新问题列表中的对应项
      const index = questionList.value.findIndex(q => q.id === question.id)
      if (index !== -1) {
        questionList.value[index] = question
      }

      ElMessage.success('问题已标记为解决')

      // 如果在详情页中操作，关闭详情页
      if (currentQuestion.value && currentQuestion.value.id === question.id) {
        detailDialogVisible.value = false
      }
    }, 300)
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理删除问题
const handleDeleteQuestion = (question) => {
  ElMessageBox.confirm(
      `确定要删除问题「${question.title}」吗？删除后将无法恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }
  ).then(() => {
    // 模拟删除问题
    setTimeout(() => {
      // 从问题列表中移除
      const index = questionList.value.findIndex(q => q.id === question.id)
      if (index !== -1) {
        questionList.value.splice(index, 1)
      }

      ElMessage.success('问题已删除')

      // 如果在详情页中操作，关闭详情页
      if (currentQuestion.value && currentQuestion.value.id === question.id) {
        detailDialogVisible.value = false
      }
    }, 300)
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理创建常见问题
const handleCreateFAQ = () => {
  // 重置表单
  faqForm.id = null
  faqForm.question = ''
  faqForm.answer = ''

  faqDialogVisible.value = true
}

// 处理管理常见问题
const handleManageFAQs = () => {
  // 此处可以跳转到常见问题管理页面或打开管理对话框
  ElMessage.info('常见问题管理功能开发中...')
}

// 处理保存常见问题
const handleSaveFAQ = () => {
  if (!faqForm.question.trim()) {
    ElMessage.error('请输入问题')
    return
  }

  if (!faqForm.answer.trim()) {
    ElMessage.error('请输入答案')
    return
  }

  // 模拟保存常见问题
  setTimeout(() => {
    if (faqForm.id) {
      // 更新现有FAQ
      const index = faqList.value.findIndex(faq => faq.id === faqForm.id)
      if (index !== -1) {
        faqList.value[index] = { ...faqForm }
      }
      ElMessage.success('常见问题更新成功')
    } else {
      // 添加新FAQ
      const newId = Date.now().toString()
      faqList.value.push({ ...faqForm, id: newId })
      ElMessage.success('常见问题添加成功')
    }

    faqDialogVisible.value = false

    // 如果是从回复对话框过来的，关闭回复对话框
    if (replyDialogVisible.value) {
      replyDialogVisible.value = false
    }
  }, 300)
}

// 模拟问题数据
const mockQuestions = [
  {
    id: '1001',
    studentId: 1001,
    studentName: '张三',
    studentAvatar: 'https://picsum.photos/100/100?random=1',
    courseId: '1',
    courseName: 'Vue3 实战教程',
    title: 'Vue3的Composition API相比Options API有哪些优势？',
    content: '在学习Vue3的过程中，对Composition API和Options API的使用场景有些困惑。<br><br>Composition API感觉更加灵活，但似乎也增加了一些复杂度。<br><br>请问老师，在实际项目中，应该如何选择使用哪种API风格？它们各自的优势和适用场景是什么？',
    createTime: '2023-06-10 09:30',
    status: 'answered',
    reply: 'Vue3的Composition API是一个重大改进，它解决了Options API在大型项目中遇到的一些问题：<br><br>1. **逻辑复用**：Composition API通过组合函数可以更好地复用逻辑，避免了mixin带来的一些问题。<br><br>2. **代码组织**：相关的代码可以放在一起，而不是分散在不同的选项中，提高了代码的可读性和可维护性。<br><br>3. **类型支持**：Composition API对TypeScript的支持更好，减少了类型定义的复杂度。<br><br>在实际项目中，建议根据项目规模和团队熟悉程度来选择：<br><br>- 小型项目或快速原型可以继续使用Options API<br>- 大型项目或需要更好的类型支持和逻辑复用的场景，推荐使用Composition API<br><br>当然，两者也可以混合使用，但尽量保持一致性。',
    replyTime: '2023-06-10 15:45'
  },
  {
    id: '1002',
    studentId: 1002,
    studentName: '李四',
    studentAvatar: 'https://picsum.photos/100/100?random=2',
    courseId: '2',
    courseName: 'React 高级应用',
    title: 'React Hooks中useEffect的依赖数组应该如何正确设置？',
    content: '在使用React Hooks的useEffect时，经常会遇到依赖数组设置不当导致的无限循环或副作用不执行的问题。<br><br>例如：<br><pre><code>useEffect(() => {<br>  fetchData();<br>}, [someState]);</code></pre><br>当someState变化时，useEffect会执行，但有时候我并不希望每次someState变化都执行副作用。<br><br>请问老师，如何正确设置useEffect的依赖数组？有没有一些通用的规则或最佳实践？',
    createTime: '2023-06-09 14:20',
    status: 'unanswered'
  },
  {
    id: '1003',
    studentId: 1003,
    studentName: '王五',
    studentAvatar: 'https://picsum.photos/100/100?random=3',
    courseId: '3',
    courseName: 'Flutter 跨平台开发',
    title: 'Flutter中的StatefulWidget和StatelessWidget有什么区别？',
    content: '在学习Flutter的过程中，对StatefulWidget和StatelessWidget的使用场景有些困惑。<br><br>什么时候应该使用StatefulWidget，什么时候应该使用StatelessWidget？<br><br>它们之间的性能差异大吗？',
    createTime: '2023-06-08 11:15',
    status: 'solved',
    reply: '在Flutter中，StatefulWidget和StatelessWidget是构建UI的基础：<br><br>1. **StatelessWidget**：<br>   - 不可变的，一旦创建就不能改变<br>   - 适用于不需要状态变化的UI组件，如文本、图片等<br>   - 性能开销较小<br><br>2. **StatefulWidget**：<br>   - 可变的，可以随着时间改变其状态<br>   - 适用于需要动态更新的UI组件，如表单、动画等<br>   - 性能开销相对较大，因为需要管理状态<br><br>**性能差异**：<br>StatefulWidget确实有额外的性能开销，因为它需要管理状态变化和重建Widget树。但在现代设备上，这种差异通常可以忽略不计，除非是在性能敏感的场景下。<br><br>**最佳实践**：<br>尽量使用StatelessWidget，只有在确实需要状态管理时才使用StatefulWidget。',
    replyTime: '2023-06-08 16:30'
  },
  {
    id: '1004',
    studentId: 1004,
    studentName: '赵六',
    studentAvatar: 'https://picsum.photos/100/100?random=4',
    courseId: '4',
    courseName: '大数据分析与应用',
    title: 'Spark和Hadoop的主要区别是什么？',
    content: '在学习大数据技术栈时，对Spark和Hadoop的定位和适用场景有些混淆。<br><br>它们之间的主要区别是什么？在什么情况下应该选择Spark而不是Hadoop？',
    createTime: '2023-06-07 16:40',
    status: 'answered',
    reply: 'Spark和Hadoop是大数据领域的两个重要技术，它们的主要区别如下：<br><br>1. **计算模型**：<br>   - Hadoop MapReduce：批处理，适合离线计算<br>   - Spark：内存计算，支持批处理、流处理、交互式查询等多种计算模型<br><br>2. **性能**：<br>   - Spark通常比Hadoop快10-100倍，因为它将数据保存在内存中，减少了磁盘IO<br><br>3. **生态系统**：<br>   - Hadoop：HDFS、YARN、MapReduce、Hive、Pig等<br>   - Spark：Spark Core、Spark SQL、Spark Streaming、MLlib、GraphX等<br><br>4. **适用场景**：<br>   - Hadoop：适合大规模数据的批处理，对实时性要求不高的场景<br>   - Spark：适合需要快速迭代的场景，如机器学习、实时数据分析等<br><br>**选择建议**：<br>如果你的应用需要实时性或迭代计算，选择Spark；如果是纯批处理且数据量极大，Hadoop可能更合适。实际上，两者通常可以结合使用，例如使用HDFS存储数据，使用Spark进行计算。',
    replyTime: '2023-06-07 19:20'
  },
  {
    id: '1005',
    studentId: 1005,
    studentName: '孙七',
    studentAvatar: 'https://picsum.photos/100/100?random=5',
    courseId: '5',
    courseName: '人工智能基础',
    title: '深度学习中的过拟合问题如何解决？',
    content: '在训练深度学习模型时，经常会遇到过拟合的问题，尤其是在数据集较小的情况下。<br><br>请问有哪些常用的方法可以解决过拟合问题？它们各自的优缺点是什么？',
    createTime: '2023-06-06 10:25',
    status: 'unanswered'
  },
  {
    id: '1006',
    studentId: 1006,
    studentName: '周八',
    studentAvatar: 'https://picsum.photos/100/100?random=6',
    courseId: '1',
    courseName: 'Vue3 实战教程',
    title: 'Vue3中的ref和reactive有什么区别？',
    content: '在学习Vue3的Composition API时，对ref和reactive的使用场景有些困惑。<br><br>什么时候应该使用ref，什么时候应该使用reactive？它们之间有什么本质区别？',
    createTime: '2023-06-05 14:30',
    status: 'answered',
    reply: '在Vue3的Composition API中，ref和reactive都是用来创建响应式数据的，但它们有以下区别：<br><br>1. **基本用法**：<br>   - ref：用于创建任何类型的响应式数据，包括基本类型（如number、string、boolean）和对象<br>   - reactive：只能用于创建对象类型的响应式数据（包括数组、Map、Set等）<br><br>2. **访问方式**：<br>   - ref：需要通过.value属性访问和修改值<br>   - reactive：可以直接访问和修改属性<br><br>3. **本质区别**：<br>   - ref：内部使用reactive将值包装成一个对象，所以它实际上是一个具有.value属性的对象<br>   - reactive：使用Proxy实现响应式，直接对对象进行代理<br><br>**选择建议**：<br>- 对于基本类型的数据，必须使用ref<br>- 对于对象类型的数据，可以使用reactive，但如果需要将对象作为参数传递或返回，建议使用ref<br><br>实际上，ref可以看作是reactive的一种特殊情况，它为基本类型数据提供了响应式支持。',
    replyTime: '2023-06-05 17:15'
  }
]

// 模拟常见问题数据
const mockFaqs = [
  {
    id: '1',
    question: '如何重置密码？',
    answer: '点击登录页面的"忘记密码"链接，按照提示输入注册邮箱，系统将发送重置密码的邮件到您的邮箱。'
  },
  {
    id: '2',
    question: '如何查看我的学习进度？',
    answer: '登录后，点击页面顶部的"我的学习"，在课程列表中可以查看每门课程的学习进度和完成情况。'
  },
  {
    id: '3',
    question: '如何下载课程资料？',
    answer: '进入具体课程页面，在课程章节列表中，每个章节后面如果有资料图标，表示该章节有相关资料可供下载。'
  },
  {
    id: '4',
    question: '如何提交作业？',
    answer: '在课程详情页，点击"作业"标签，选择需要提交的作业，按照要求上传作业文件后提交即可。'
  },
  {
    id: '5',
    question: '如何申请证书？',
    answer: '当您完成课程的所有学习内容和作业，并且成绩达到合格标准后，系统会自动显示"申请证书"按钮，点击后按照提示操作即可。'
  }
]
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #0b1b33;
  color: #fff;
  transition: width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #1f334b;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.el-menu-vertical-demo {
  border-right: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse .main-content {
  margin-left: 64px; /* 侧边栏折叠后，主内容区调整左边距 */
}

/* 面包屑样式 */
.breadcrumb {
  margin-bottom: 10px;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

/* 问题列表卡片样式 */
.question-list-card {
  margin-bottom: 20px;
}

/* 学生信息样式 */
.student-info {
  display: flex;
  align-items: center;
}

.student-avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 8px;
}

/* 问题详情样式 */
.question-detail-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.question-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #606266;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item el-icon {
  margin-right: 5px;
}

.question-content {
  padding: 15px 0;
}

.question-body, .question-reply {
  margin-bottom: 30px;
}

.content-text {
  line-height: 1.8;
  white-space: pre-wrap;
}

.reply-header {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
  font-size: 14px;
}

.reply-author {
  font-weight: 600;
}

.reply-time {
  margin-left: 15px;
}

.question-operations {
  margin-top: 30px;
}

/* 回复对话框样式 */
.reply-header {
  margin-bottom: 20px;
}

.reply-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.question-preview {
  color: #606266;
  margin: 0;
}

/* 常见问题样式 */
.faq-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.faq-accordion {
  border: none;
}

.faq-answer {
  padding: 15px;
  line-height: 1.8;
  background-color: #f9fafc;
  border-radius: 4px;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
